<template>
  <PageMain>
    <ProTable ref="tableRef" :columns="columns" :init-param="initParam" :request-api="getTableList" border>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="warning" link @click="detailFn(scope.row)">查看</el-button>
        <el-button type="warning" link v-if="scope.row.status === 'FINISHED'" @click="delFn(scope.row)">删除</el-button>
        <el-button type="warning" link v-if="scope.row.status === 'UNDERWAY'" @click="enableFn(scope.row)">结束</el-button>
      </template>
    </ProTable>
  </PageMain>
</template>

<script setup>
import { needStatus } from "@/utils/dict";
import { useHandleData } from "@/hooks/useHandleData";
import api from "@/api";

const router = useRouter();

const tableRef = ref();

// 表格初始参数
const initParam = reactive({
  pageNum: 1,
  pageSize: 10,
});

const getTableList = (params) => {
  if (params.timekey?.length > 1) {
    params.startCreateTime = params.timekey[0];
    params.endCreateTime = params.timekey[1];
  }
  return api.post(`/demand/queryPage`, params, {
    loading: true,
  });
};

// 表格配置项
const columns = ref([
  { label: "需求编码", prop: "code", align: "left", search: { el: "input", showLabel: true } },
  { label: "用户", prop: "userName", align: "left", search: { el: "input", showLabel: true } },
  { label: "需求名称", prop: "title", align: "left" },
  {
    label: "发布时间",
    prop: "createTime",
    align: "left",
    search: {
      el: "date-picker",
      span: 2,
      key: "timekey",
      showLabel: true,
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
    },
  },
  { label: "参与数", prop: "participantCount", align: "left" },
  { label: "状态", prop: "status", align: "left", enum: needStatus },
  { prop: "operation", label: "操作", width: "120px", align: "center", fixed: "right" },
]);

// 更新数据
const updata = () => {
  tableRef.value.getTableList();
};

// 查看详情
const detailFn = (row) => {
  router.push({
    path: "detail",
    query: { id: row.id },
  });
};

// 结束
const enableFn = (row) => {
  useHandleData(() => api.get(`/demand/close/${row.id}`), `结束【${row.title}】`).then(() => {
    updata();
  });
};

// 删除
const delFn = async (row) => {
  useHandleData(() => api.get(`/demand/delete/${row.id}`), `删除【${row.title}】`).then(() => {
    updata();
  });
};
</script>
